<template>
	<view>
		<swiper style="height: calc(100vh - 150rpx);">
			<!-- 单选多选 -->
			<swiper-item v-for="(item,index) in timu_list" :key="item.id">
				<scroll-view scroll-y="true" class="mainpadding2" style="height: calc(100vh - 150rpx);">
					<view class="" style="padding-bottom: 100rpx;">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">{{index+1}}/{{timu_list.length}}</view>
							<u-line-progress :percentage="percentage(index)" :showText="false" height="8" activeColor="#3478f5"
								inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<view class="flexbetween margin_top">
							<view class="titype xiaolan">单选题</view>
							<view class="flexright">
								<u-icon name="clock" color="#3478f5" size="16"></u-icon>
								<view class="xiaolan margin_left1">倒计时：</view>
								<u-count-down :time="60*60*60*1000" class="hong_text bold main_size"
									format="HH:mm:ss"></u-count-down>
							</view>
						</view>
						<view class="titletext bold hei_text margin_top">
							<text>下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正！</text>
							<text class="hui_text" style="font-weight: 400;">（3分）</text>
						</view>
						<image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" class="radius margin_top"
							style="width: 100%;height: 250rpx;" mode=""></image>
						<view class="flexleft tilable margin_top hongcontent">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold hong_text" style="min-width: 10%;">A</view>
							<view class="xiaohong" style="min-width: 80%;max-width: 80%;">
								下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
						</view>
						<view class="flexleft tilable margin_top">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold hei_text" style="min-width: 10%;">B</view>
							<view class="xiaohui" style="min-width: 80%;max-width: 80%;">
								下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
						</view>
						<view class="flexleft tilable margin_top">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold hei_text" style="min-width: 10%;">C</view>
							<view class="xiaohui" style="min-width: 80%;max-width: 80%;">
								下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
						</view>
						<view class="flexleft tilable margin_top lancontent">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold lan_text" style="min-width: 10%;">D</view>
							<view class="xiaolan" style="min-width: 80%;max-width: 80%;">
								下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="hei_text bold titletext">正确答案：D</view>
							<view class="hei_text bold titletext">你的答案：A</view>
						</view>
						<view class="margin_top main_size bold lan_text">解析：</view>
						<video src="https://cdn.uviewui.com/uview/resources/video.mp4" class="margin_top"
							style="width: 300rpx;height: 200rpx;"></video>
						<view class="xiaohui margin_top">
							新课程提倡的教学观认为:教学是课程创生与开发的过程;教学是师生交往、积极互动、共同发展的过程;教学过程重于教学结果;教学更关注人而不只是科学。因此，本题选A。</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 连线 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="mainpadding2" style="height: calc(100vh - 150rpx);">
					<view class="" style="padding-bottom: 100rpx;">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">1/50</view>
							<u-line-progress :percentage="30" :showText="false" height="8" activeColor="#3478f5"
								inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<view class="flexbetween margin_top">
							<view class="titype xiaolan">连线题</view>
							<view class="flexright">
								<u-icon name="clock" color="#3478f5" size="16"></u-icon>
								<view class="xiaolan margin_left1">倒计时：</view>
								<u-count-down :time="60*60*60*1000" class="hong_text bold main_size"
									format="HH:mm:ss"></u-count-down>
							</view>
						</view>
						<view class="titletext bold hei_text margin_top">
							<text>下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正！</text>
							<text class="hui_text" style="font-weight: 400;">（3分）</text>
						</view>
						<view class="flexbetween" style="position: relative;">
							<canvas canvas-id="drawCanvas"
								style="width: 750rpx;height: 100vh;position: absolute;top: 0;left: 0;z-index: -1;">
							</canvas>
							<view class="left">
								<view class="tilable margin_top xiaohui" v-for="item in ceshiti.left" :key="item.id"
									@click="lineleft($event,item)">{{item.name}}</view>
							</view>
							<view class="right">
								<view class="tilable margin_top xiaohui" v-for="item in ceshiti.right" :key="item.id"
									@click="lineright($event,item)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 判断 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="mainpadding2" style="height: calc(100vh - 150rpx);">
					<view class="" style="padding-bottom: 100rpx;">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">1/50</view>
							<u-line-progress :percentage="30" :showText="false" height="8" activeColor="#3478f5"
								inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<view class="flexbetween margin_top">
							<view class="titype xiaolan">判断题</view>
							<view class="flexright">
								<u-icon name="clock" color="#3478f5" size="16"></u-icon>
								<view class="xiaolan margin_left1">倒计时：</view>
								<u-count-down :time="60*60*60*1000" class="hong_text bold main_size"
									format="HH:mm:ss"></u-count-down>
							</view>
						</view>
						<view class="titletext bold hei_text margin_top">
							<text>下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正！</text>
							<text class="hui_text" style="font-weight: 400;">（3分）</text>
						</view>
						<image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" class="radius margin_top"
							style="width: 100%;height: 250rpx;" mode=""></image>
						<view class="flexleft tilable margin_top lancontent">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold lan_text" style="min-width: 10%;">A</view>
							<view class="xiaolan" style="min-width: 80%;max-width: 80%;">
								正确</view>
						</view>
						<view class="flexleft tilable margin_top">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold hei_text" style="min-width: 10%;">B</view>
							<view class="xiaohui" style="min-width: 80%;max-width: 80%;">
								错误</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 填空题 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="mainpadding2" style="height: calc(100vh - 150rpx);">
					<view class="" style="padding-bottom: 100rpx;">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">1/50</view>
							<u-line-progress :percentage="30" :showText="false" height="8" activeColor="#3478f5"
								inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<view class="flexbetween margin_top">
							<view class="titype xiaolan">填空题</view>
							<view class="flexright">
								<u-icon name="clock" color="#3478f5" size="16"></u-icon>
								<view class="xiaolan margin_left1">倒计时：</view>
								<u-count-down :time="60*60*60*1000" class="hong_text bold main_size"
									format="HH:mm:ss"></u-count-down>
							</view>
						</view>
						<view class="titletext bold hei_text margin_top">
							<text>下列句中有一个问题大家猜猜是什么问题请及时指______正下家猜猜是什么问______题请及时指正！</text>
							<text class="hui_text" style="font-weight: 400;">（3分）</text>
						</view>
						<image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" class="radius margin_top"
							style="width: 100%;height: 250rpx;" mode=""></image>
						<view class="flexleft tilable margin_top">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold hei_text" style="min-width: 10%;">1</view>
							<input type="text" class="xiaohei" placeholder="请输入答案"
								style="min-width: 80%;max-width: 80%;">
						</view>
						<view class="flexleft tilable margin_top">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold hei_text" style="min-width: 10%;">2</view>
							<input type="text" class="xiaohei" placeholder="请输入答案"
								style="min-width: 80%;max-width: 80%;">
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 听写题 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="mainpadding2" style="height: calc(100vh - 150rpx);">
					<view class="" style="padding-bottom: 100rpx;">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">1/50</view>
							<u-line-progress :percentage="30" :showText="false" height="8" activeColor="#3478f5"
								inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<view class="flexbetween margin_top">
							<view class="titype xiaolan">听写题</view>
							<view class="flexright">
								<u-icon name="clock" color="#3478f5" size="16"></u-icon>
								<view class="xiaolan margin_left1">倒计时：</view>
								<u-count-down :time="60*60*60*1000" class="hong_text bold main_size"
									format="HH:mm:ss"></u-count-down>
							</view>
						</view>
						<view class="tingliclass flexbetween margin_top">
							<view class="flexleft margin_right">
								<!-- <u-icon name="pause-circle" color="#999" size="28"></u-icon> -->
								<u-icon name="play-circle" color="#999" size="28"></u-icon>
							</view>
							<view class="flexbetween" style="width: 100%;">
								<view class="xiaohui">0.00</view>
								<u-slider v-model="slidervalue" blockSize="12" block-color="#3478f5"
									style="width: 80%;"></u-slider>
								<view class="xiaohui">5.21</view>
							</view>
						</view>
						<view class="titletext bold hei_text margin_top">
							<text>下列句中有一个问题大家猜猜是什么问题请及时指______正下家猜猜是什么问______题请及时指正！</text>
							<text class="hui_text" style="font-weight: 400;">（3分）</text>
						</view>
						<image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" class="radius margin_top"
							style="width: 100%;height: 250rpx;" mode=""></image>
						<view class="flexleft tilable margin_top">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold hei_text" style="min-width: 10%;">1</view>
							<input type="text" class="xiaohei" placeholder="请输入答案"
								style="min-width: 80%;max-width: 80%;">
						</view>
						<view class="flexleft tilable margin_top">
							<!-- <view class="deleteimg"></view> -->
							<!-- <view class="duiimg"></view> -->
							<view class="titletext bold hei_text" style="min-width: 10%;">2</view>
							<input type="text" class="xiaohei" placeholder="请输入答案"
								style="min-width: 80%;max-width: 80%;">
						</view>
						<view class="flexbetween margin_top">
							<view class="hei_text bold titletext">正确答案：D</view>
							<view class="hei_text bold titletext">你的答案：A</view>
						</view>
						<view class="margin_top main_size bold lan_text">解析：</view>
						<video src="https://cdn.uviewui.com/uview/resources/video.mp4" class="margin_top"
							style="width: 300rpx;height: 200rpx;"></video>
						<view class="xiaohui margin_top">
							新课程提倡的教学观认为:教学是课程创生与开发的过程;教学是师生交往、积极互动、共同发展的过程;教学过程重于教学结果;教学更关注人而不只是科学。因此，本题选A。</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 简答题 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="mainpadding2" style="height: calc(100vh - 150rpx);">
					<view class="" style="padding-bottom: 100rpx;">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">1/50</view>
							<u-line-progress :percentage="30" :showText="false" height="8" activeColor="#3478f5"
								inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<view class="flexbetween margin_top">
							<view class="titype xiaolan">简答题</view>
							<view class="flexright">
								<u-icon name="clock" color="#3478f5" size="16"></u-icon>
								<view class="xiaolan margin_left1">倒计时：</view>
								<u-count-down :time="60*60*60*1000" class="hong_text bold main_size"
									format="HH:mm:ss"></u-count-down>
							</view>
						</view>
						<view class="titletext bold hei_text margin_top">
							<text>下列句中有一个问题大家猜猜是什么问题请及时指______正下家猜猜是什么问______题请及时指正！</text>
							<text class="hui_text" style="font-weight: 400;">（3分）</text>
						</view>
						<view class="jianda radius mainpadding_top">
							<textarea class="textareaclass xiaohui" placeholder="请输入答案"></textarea>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="posibottom mainpadding flexbetween ffffff">
			<view class="flexcolumn">
				<u-icon name="file-text" color="#333" size="24"></u-icon>
				<view class="xiaohei" @click="dtlshow=true">答题卡</view>
			</view>
			<view class="resetbtn" style="border-radius: 15rpx;background-color: #e6edf9;width: 40%;">上一题</view>
			<view class="surebtn" style="border-radius: 15rpx;width: 40%;">下一题</view>
			<!-- <view class="surebtn" style="border-radius: 15rpx;width: 40%;" @click="tijiaoshow=true">提交</view> -->
		</view>
		<u-popup :show="dtlshow" @close="dtlshow=false" :round="10">
			<view class="mainpadding_top ffffff">
				<view class="flexcenter">
					<view class="titletext  hei_text bold">答题卡</view>
				</view>

				<view class="flexleft flex_wrap margin_top6">
					<view class="itemkabox flexcenter margin_top2" v-for="item in 15">
						<view class="itemka xiaohui">{{item}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="tijiaoshow" title="提交">
			<view class="slot-content">
				<view class="margin_top flexbetween ffffff radius">
					<view class="titletext bold hei_text" style="margin-right: 120rpx;">是否选择老师</view>
					<u-radio-group placement="row" circle>
						<u-radio activeColor="#3478F5" :customStyle="{marginRight: '30rpx'}" label="是" name="0"></u-radio>
						<u-radio activeColor="#3478F5" label="否" name="1"></u-radio>
					</u-radio-group>
				</view>
				<view class="margin_top6 ffffff radius flexbetween">
					<view class="titletext bold hei_text">请选择老师</view>
					<view class="flexright">
						<view class="main_size bold hei_text margin_right1">请选择老师</view>
						<u-icon name="arrow-right" color="#333" size="16"></u-icon>
					</view>
				</view>
				<view class="margin_top6 ffffff radius flexbetween">
					<view class="titletext bold hong_text">您的试卷无需改卷将保存到我的试卷（未提交）中！卷内包含简答题为0分其他题型为正常记分！</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				ceshiti: {
					left: [{
							id: 1,
							name: "书",
							ischeck: false
						},
						{
							id: 2,
							name: "电",
							ischeck: false
						},
						{
							id: 3,
							name: "大",
							ischeck: false
						},
						{
							id: 4,
							name: "店",
							ischeck: false
						}
					],
					right: [{
							id: 5,
							name: "脑",
							ischeck: false
						},
						{
							id: 6,
							name: "包",
							ischeck: false
						},
						{
							id: 7,
							name: "铺",
							ischeck: false
						}
					],
					lxarr: []
				},
				dtlshow: false,
				tijiaoshow:false,
				slidervalue: 0,
				
				
				education_lesson_id:"",//课程ID
				student_examination_id:"",//测试记录ID
				timu_list:[],
			}
		},
		onLoad(options) {
			this.education_lesson_id = options.education_lesson_id
			this.student_examination_id = options.student_examination_id
			this.init()
		},
		methods: {
			init(){
				httpRequest.request('/api/examination/problemdata', 'GET', {
					education_lesson_id: this.education_lesson_id,
					student_examination_id: this.student_examination_id
				}, false, false, true).then(res => {
					// this.dataAll = res.data
					this.timu_list = res.data.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			lineleft(e, val) {
				// console.log(this.ceshiti.lxarr,val);
				// 将默认上一次选中的左边的列表数据删除
				if (this.ceshiti.lxarr.length && !this.ceshiti.lxarr[this.ceshiti.lxarr.length - 1].rightid) {
					this.ceshiti.lxarr.pop()
				}
				// 如果已经存在连线需要将当前连线数据删除
				if (this.ceshiti.lxarr.length) {
					this.ceshiti.lxarr.forEach((item, index) => {
						if (item.leftid == val.id) {
							this.ceshiti.lxarr.splice(index, 1)
						}
					})
					this.lxFn()
				}
				// 将当前选择的左边的数据赋值
				this.ceshiti.lxarr.push({
					leftmsg: {
						x: e.target.offsetLeft + 5,
						y: e.target.offsetTop + 5
					},
					leftitem: val,
					leftid: val.id
				})

			},
			lineright(e, val) {
				this.ceshiti.lxarr[this.ceshiti.lxarr.length - 1] = {
					leftmsg: this.ceshiti.lxarr[this.ceshiti.lxarr.length - 1].leftmsg,
					leftitem: this.ceshiti.lxarr[this.ceshiti.lxarr.length - 1].leftitem,
					leftid: this.ceshiti.lxarr[this.ceshiti.lxarr.length - 1].leftid,
					rightmsg: {
						x: e.target.offsetLeft + 5,
						y: e.target.offsetTop + 5
					},
					rightitem: val,
					rightid: val.id
				}
				this.lxFn()
			},
			lxFn() {
				const ctx = uni.createCanvasContext('drawCanvas')
				this.ceshiti.lxarr.forEach(item => {
					ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
					ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
				})
				ctx.setStrokeStyle("#3478f5"); //线条颜色
				ctx.stroke() //画线条
				ctx.draw() //绘制画布内容
			},
			percentage(index,val){//进度条进度
			console.log((index+1) / this.timu_list.length,"惊雷");
				return (index+1) / this.timu_list.length * 100
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}
	.itemkabox {
		width: 16.66%;
	}

	.itemka {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: rgba(153, 153, 153, .3);
		line-height: 80rpx;
		text-align: center;
	}

	.jianda {
		border: 1rpx solid rgba(153, 153, 153, .3);
	}

	.titype {
		background-color: #e6edf8;
		border-radius: 50rpx;
		padding: 10rpx 40rpx;
	}

	.tilable {
		border: 1rpx solid rgba(153, 153, 153, .3);
		border-radius: 14rpx;
		position: relative;
		background-color: #fff;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
	}

	/deep/.u-count-down__text {
		color: #3478f5;
		font-size: 20rpx;
	}

	.hongcontent {
		border: 1rpx solid #ff0000;
		background-color: #ffebeb;
	}

	.lancontent {
		border: 1rpx solid #3478f5;
		background-color: #e6edf9;
	}

	.tingliclass {
		padding: 10rpx 30rpx;
		border: 1rpx solid rgba(153, 153, 153, .3);
		border-radius: 50rpx;
		box-sizing: border-box;
	}
</style>